<template>
  <div class="header-container">
    <nav class="container nav-container">
      <div class="logo">
        <a href="/" class="">
          <img v-if="$store.state.setting.blogLogo" :src="$store.state.setting.blogLogo" class="3" alt="Logo"/>
          <span class="">
            {{ $store.state.setting.blogName }}
          </span>
        </a>
      </div>

      <div class="nav-container">
        <ul class="nav-bar">
          <li>
            <a @click="$router.push('/')"
               class=""
               aria-current="page">
              首页
            </a>
          </li>
          <li>
            <a @click="$router.push('/category')"
               class="">
              分类
            </a>
          </li>
          <li>
            <a @click="$router.push('/tag')"
               class="">
              标签
            </a>
          </li>

          <li>
            <a @click="$router.push('/archive')"
               class="">
              归档
            </a>
          </li>
        </ul>
      </div>

      <div class="search">
        <el-icon style="vertical-align: middle">
          <Search/>
        </el-icon>
        搜索
      </div>

      <div class="login" v-if="isLogin === false" @click="$router.push('/login')">
        <el-icon style="vertical-align: middle">
          <User/>
        </el-icon>
        <span style="vertical-align: middle"> 登录 </span>
      </div>
      <div class="login-info" v-else>
        <span class="logout" @click="logout"> 进入后台 </span>
        <span class="logout" @click="logout"> 退出 </span>
      </div>
    </nav>
  </div>
</template>


<style lang="less" scoped>
.header-container {
  width: 100%;
  height: 75px;
  background-color: #363636;
}

.nav-container {
  margin: 0 auto;
  display: flex;

  .logo {
    margin-left: 10px;
  }
}

.nav-bar {
  display: flex;
  line-height: 65px;

  li {
    padding: 0 20px;
    width: 100px;
    text-align: center;

    &:hover {
      border-bottom: #b78f55 solid 3px;
    }

    a {
      color: #fff;
      font-size: 16px;
      text-decoration: none;
      font-weight: 600;
    }
  }

}

.search {
  margin: 20px 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  width: 100px;
  text-align: center;

  &:hover {
    color: #b78f55;
  }
}

.login {
  margin: 20px 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  width: 100px;
  text-align: center;

  &:hover {
    color: #b78f55;
  }
}

.login-info {
  display: flex;
  line-height: 65px;

  .logout {
    text-align: center;
    width: 80px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;

    &:hover {
      color: #b78f55;
    }
  }
}
</style>

<script setup>
import {useStore} from 'vuex';
import {ref, computed} from 'vue';
import {showMessage} from '@/composables/util';
import {onMounted} from 'vue';
import {initDropdowns, initCollapses, initModals} from 'flowbite';
import {Search} from "@element-plus/icons-vue";

onMounted(() => {
  initCollapses();
  initDropdowns();
  initModals();
});

const store = useStore();

const user = computed(() => store.state.user || {}); // 现在 computed 已经被正确定义

const isLogin = ref(Object.keys(user.value).length > 0);

const logout = () => {
  console.log('登出');
  store.dispatch('logout');

  // 提示登出成功
  showMessage('退出登录成功', 'success');

  isLogin.value = false;
};
</script>